<template>
  <view class="page">
		<view class="header">
			<view class="userinfo">
				<view class="avatar">
					<image :src="userInfo.avatar ? userInfo.avatar : '../../static/uni.png'"></image>
				</view>
				<view  class="username">
					<view class="nickname">	{{ userInfo.nickname || userInfo.realname || `用户 ${userInfo.uid}`}} </view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="grid">
				<view class="grid-item" @click="drupTo('/pages/deposit/index')">
					<view class="item-header">
						<image src="@/static/images/in.png"></image>
					</view>
					<view class="item-center">
						充值
					</view>
				</view>
				<view class="line-s"></view>
				<view class="grid-item" style="flex:1.5">
					<view class="price">¥ {{userInfo.cur_balance || 0}}</view>
					<view class="item-center">
						余额
					</view>
				</view>
				<view class="line-s"></view>
				<view class="grid-item" @click="drupTo('/pages/withdraw/index')">
					<view class="item-header">
						<image src="@/static/images/pay.png"></image>
					</view class="price">
					<view class="item-center">
						提现
					</view>
				</view>
			</view>
		</view>
    <view class="person-list">
      <uni-list>
				<uni-list-item
					v-if="!userInfo.hasBankAccount"
					showExtraIcon
					showArrow
					clickable
					title="账户开户"
					:extra-icon="{color: '#ff5500',size: '24',type: 'folder-add-filled'}"
					@click="drupTo('/pages/openAccount/index', true)"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="账户充值"
					:extra-icon="{color: '#ff5500',size: '24',type: 'plus-filled'}"
					:right-text="`可使用余额：¥ ${userInfo.avail_balance || 0}`"
					@click="drupTo('/pages/deposit/index')"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="账户提现"
					:extra-icon="{color: '#ff5500',size: '24',type: 'wallet-filled'}"
					:right-text="`可提现金额：¥ ${userInfo.withdraw_balance_t || 0}`"
					@click="drupTo('/pages/withdraw/index')"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="开户信息"
					:extra-icon="{color: '#ff5500',size: '24',type: 'home-filled'}"
					@click="drupTo('/pages/bankAccount/index')"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="绑卡操作"
					:extra-icon="{color: '#ff5500',size: '24',type: 'calendar-filled'}"
					@click="drupTo('/pages/bankCard/index')"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="交易明细"
					:extra-icon="{color: '#ff5500',size: '24',type: 'cart-filled'}"
					@click="drupTo('/pages/trade/index')"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="修改密码"
					:extra-icon="{color: '#ff5500',size: '24',type: 'locked-filled'}"
					@click="drupTo('/pages/login/update', true)"
				>
				</uni-list-item>
				<uni-list-item
					showExtraIcon
					showArrow
					clickable
					title="退出登录"
					:extra-icon="{color: '#ff5500',size: '24',type: 'undo-filled'}"
					rightText="退出登录"
					@click="checkOut"
				>
				</uni-list-item>
     </uni-list>
    </view>
		<view class="bottom">
			Copyright © 2022 乐易通付 浙ICP备2022025523号-1
		</view>
  </view>
</template>

<script>


  export default {
    data() {
      return {
				code: "",
				uid: "",
				userInfo: {}
			};
    },
		
		onShow(){
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.getAccountInfo(uid)
			}
			
		},
		
		
    methods: {
		 getAccountInfo(uid) {
			 uni.request({
			 	url: '/account/getAccountInfo',
			 	data: {
			 		uid
			 	},
			 	success: res => {
					if(res.data.success) {
						this.userInfo = res.data.data;
					} else {
						uni.showToast({
							icon: 'error',
							title: res.data.errMessage
						})
					}
			 	}
			 });
		 },
		 
		 checkOut() {
			 uni.clearStorage();
			 
			 uni.showToast({
			 	icon: 'success',
			 	title: '已退出'
			 })
			 
			 setTimeout(() => {
				 uni.redirectTo({
				 	url: '/pages/login/index'
				 })
			 })
		 },
		 
		 drupTo( path, toOpen = false) {
			 
			 if(path == '/pages/deposit/index') {
				 uni.showToast({
						icon:'error',
						title:'暂未开放'
				 })
				 return ;
			 }
			 
			 if(!toOpen && !this.userInfo.hasBankAccount) {
				 uni.showToast({
						icon:'error',
						title:'请先开户'
				 })
				 return ;
			 }
			 
			 uni.navigateTo({
			 	url: path
			 })
		 }
    }
  }
</script>

<style lang="scss" scoped>
	.page {
		width: 750rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
  .header {
		background: linear-gradient(to right bottom, #ff5500, #ffaa00);
		border-bottom-left-radius: 20%;
		border-bottom-right-radius: 20%;
		height: 350rpx;	
				
		.userinfo {
			width: 600rpx;
			margin: 0 auto;
			padding: 80rpx 0;
			display: flex;
		}
		
		.avatar {
			 width: 120rpx;
			 height: 120rpx;
			 box-shadow: $uni-shadow-base;
			 border-radius: 50%;
			 
			 image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
			 }
		}
		
		.username {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 40rpx;
			color: #ffffff;
		}
		
		.login-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #ffffff;
		}
  }
  
	.center {
		width: 600rpx;
		height: 150rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: -100rpx auto;
		padding: 20rpx;
		box-shadow: $uni-shadow-base;
		
		.grid {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-around;
	
			.grid-item {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				flex: 1;
				
				.item-header {
					width: 60rpx;
					height: 60rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.item-center {
					font-size: 28rpx;
					color: $uni-main-color;
				}
			}
		}
	}
	
	.login {
		color: #fff;
		font-size: 36rpx;
		text-decoration: underline;
		background: transparent;
		border: hidden;
	}
	
	.nickname {
		color: #fff;
		font-size: 36rpx;
	}

	.login::after {
		border: hidden !important;
	}
	
	.person-list {
    margin-top: 150rpx;
  }
	
	.price {
		font-size: 36rpx;
		line-height: 60rpx;
		color: #ff5500;
	}
	
	.line-s {
		width: 1px;
		height: 100%;
		background: #d5d5d5;
	}
	
	.bottom {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #a2a2a2;
	}
</style>
